<template>
  <div>
    <el-card shadow="never" style="height: 100%;" class="my">
      <template #header>
        <div class="flex-space-between">
          <div class="left">
            <div style="margin-right: 10px;" class="flex-align-center">
              <el-icon style="margin-right: 6px;" size="18px" color="#5283ff">
                <UserFilled />
              </el-icon>
            </div>

            <el-button @click="reset" type="primary" plain style="margin-left: 10px;">
              <el-icon size="16px">
                <Refresh />
              </el-icon>
              <span>刷新</span>
            </el-button>
          </div>
          <div class="right">
            <!--  -->
            <el-input v-model="searchText" @input="(e)=>onChange(e,'search')"
                      style="width: 180px;margin-left: 20px;" class="my" placeholder="搜索">
              <template #suffix>
                <div class="my-a-min">
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </div>
                <el-divider direction="vertical" style="margin: 0;" />
                <div class="my-a-min">
                  <el-icon color="#666">
                    <Search />
                  </el-icon>
                </div>
              </template>
            </el-input>
            <!--  -->
            <div style="margin: 0 10px;" class="flex-align">
              <el-tooltip placement="top" effect="light" content="导入">
                <div class="my-a-min">
                  <el-icon>
                    <Download />
                  </el-icon>
                </div>
              </el-tooltip>
              <!--  -->
              <!--  -->
              <el-tooltip placement="top" effect="light" content="导出">
                <div class="my-a-min">
                  <el-icon>
                    <Upload />
                  </el-icon>
                </div>
              </el-tooltip>
              <!--  -->
              <el-tooltip placement="top" effect="light" content="更多">
                <div class="my-a-min">
                  <el-icon color="#676967">
                    <MoreFilled />
                  </el-icon>
                </div>
              </el-tooltip>
              <!--  -->
            </div>

            <el-button @click="openUpdatePage()" type="primary" class="flex-space-between">
              <el-text style="color: #fff;margin-right: 6px;">创建</el-text>
              <el-icon>
                <ArrowDown />
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
      <!--  -->
      <el-table @cell-mouse-enter="mouseEnter" v-loading="loading" :data="tableData" :stripe="false"
                table-layout="auto" :default-sort="{}" border
                style="width: 100%;height: calc(100vh - 205px);margin-top: -1px;" class="my">
        <el-table-column type="selection" width="76" fixed="left" prop="customerId" :sortable="false">
          <template #header>
            <el-checkbox size="large" />
          </template>
        </el-table-column>
        <el-table-column width="140" prop="d1status" label="状态" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="d2type" label="类型" :sortable="false"/>
        <el-table-column width="140" prop="warehouse.warehouseName" label="需求仓库" :sortable="false"/>
        <el-table-column width="140" prop="product.productName" label="需求产品" :sortable="false"/>
        <el-table-column width="140" prop="demandAmount" label="需求数量" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="expectedArrivalDate" label="期望到货日期" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="description" label="需求描述" :sortable="false"/>
        <el-table-column width="140" prop="expectedSupplierId" label="期望供应商" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="expectedUnitPrice" label="预计采购单价" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="expectedTotalAmount" label="预计采购总额" :sortable="false"></el-table-column>
        <el-table-column width="140" prop="applyDate" label="申请日期" :sortable="false"/>
        <el-table-column width="140" prop="applicant" label="申请人" :sortable="false"></el-table-column>
        <el-table-column prop="applicant" fixed="right" width="166" label="操作" :sortable="false">
          <template #default="scope">
            <div class="flex-align">
              <el-button @click="dialogVisible=true" type="danger" size="small" auto-insert-space>
                <el-icon size="16px">
                  <Delete />
                </el-icon>
                <span>删除</span>
              </el-button>
              <el-button @click="openEdit(scope.row.customerId)" type="success" plain size="small"
                         auto-insert-space>
                <el-icon size="16px">
                  <Edit />
                </el-icon>
                <span>编辑</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
      <el-pagination class="my" style="height: 40px;padding-left: 10px;" @change="(e)=>onChange(e,'pagination')"
                     layout="total, prev, pager, next" :page-count="pageData.pages" :total="pageData.total">
      </el-pagination>
    </el-card>
    <!-- 弹框 -->
    <el-dialog v-model="dialogVisible" width="300" align-center append-to-body>
      <el-text size="large">{{dialogTitle}}</el-text>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" text bg>取消</el-button>
          <el-button @click="dialogVisible = false" type="danger">
            删除
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--  -->
    <updatePro ref="updateRef" @update="updateData" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Refresh, MoreFilled, ArrowDown, Download, Upload, Search, UserFilled, Delete, Edit } from '@element-plus/icons-vue';
import request from '../../utils/request';
import { removeEmptyProperties, formatData } from '../../utils/index';
import { formatDate } from '../../utils/date';
import updatePro from './procurement-x/updatePro.vue';

import { ElMessage } from 'element-plus';
//
const updateRef = ref(null);
const router = useRouter();
const loading = ref(false);
const dateText = ref();
const searchText = ref();
const pageData = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  customerName: '',
  customerPhone: '',
  pages: 0,
  time: null, //开始时间
  date: null //结束时间
});

const dialogVisible = ref(false);
const dialogTitle = computed(() => {
  let msg = '确定删除一条数据？';
  return msg;
});

//表格数据
const tableData = ref([]);
onMounted(() => {
  DemandAllList();
});
//改变/
const onChange = (e : any, type : string) => {
  // 搜索框
  if (type === 'search') {
    // pageData.value.customerName = e;
    console.log('search--->', e);
    if (!isNaN(e)) {
      pageData.value.customerPhone = e;
    } else {
      pageData.value.customerName = e;
    }
  }
  // 分页
  if (type === 'pagination') {
    pageData.value.pageNum = e;
  }
  //
  DemandAllList();
};
//鼠标悬浮单元格
const mouseEnter = (row : any, column : any, cell : HTMLTableCellElement, event : Event) => {
  // console.log('row-customerId--->', row.customerId);
}

// 分页数据加载
const DemandAllList = async () => {
  loading.value = true;
  let params = pageData.value;
  params = removeEmptyProperties(params);
  delete params.total;
  delete params.pages;
  const result = await request({
    url: '/demand/selectDemandAll',
    params:params
  });
  console.log('DemandAllList--->', result.data.t.list);

  pageData.value.pageNum = result.data.t.pageNum;
  pageData.value.pageSize = result.data.t.pageSize;
  pageData.value.total = result.data.t.total;
  pageData.value.pages = result.data.t.pages;
  tableData.value = result.data.t.list;

  tableData.value.forEach((item) => {
    item.expectedArrivalDate = formatDate(item.expectedArrivalDate);
    item.applyDate = formatDate(item.applyDate);
    item.product.productName = item.product.productName + item.product.model + ' | 在库' + item.product.currentInventory + '件'
  });

  loading.value = false;
  return loading.value;
}



//重置
const reset = async () => {
  pageData.value = {
    pageNum: 1,
    pageSize: 6,
    total: 0,
    customerName: '',
    customerPhone: '',
    pages: 0,
    time: null, //开始时间
    date: null //结束时间
  };
  dateText.value = null;
  searchText.value = null;
  //
  const is = await DemandAllList();
  if (!is) {
    ElMessage.success({
      showClose: true,
      message: '刷新成功！'
    });
  }
}
//打开编辑面板
const openUpdatePage = () => {
  updateRef.value.openDialog();

}
//打开编辑面板 并带参
const openEdit = (id : string | number) => {
  router.push({ query: { id } });
  openUpdatePage();
}
//监听更新
const updateData = () => {
  DemandAllList();
}
</script>
<style>
@import '../../assets/css/index.css';
</style>
<style scoped lang="scss">
@import '../../assets/css/index.scss';
</style>